<template>
    <div  style="margin: 10px">
        <ul>
            <li v-for="(msg) in messageList" :key="msg.id">
                <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">{{msg.title}}-{{msg.id}}</router-link>

<!--                <router-link :to="{-->
<!--                    // path: '/home/message/detail',-->
<!--                    name: 'xiangqing',-->
<!--                    query: {-->
<!--                        id: msg.id,-->
<!--                        title: msg.title-->
<!--                    }-->
<!--                }">{{msg.title}}-{{msg.id}}</router-link>-->

                <button @click="pushShow(msg)">push查看</button>
                <button @click="replaceShow(msg)">replace查看</button>
            </li>

    <!--        <li>message002</li>-->
    <!--        <li>message003</li>-->
        </ul>
        <router-view></router-view>

    </div>
</template>
<script>
export default {
    name: "Message",
    data(){
        return {
            messageList:[
                {id:'001', title: '消息1',href:"http://www.atguigu.com"},
                {id:'002', title: '消息2',href:"http://www.atguigu.com"},
                {id:'003', title: '消息3',href:"http://www.atguigu.com"}
            ],
        }
    },
    methods:{
        pushShow(m){
            this.$router.push({
                name:'xiangqing',
                params:{id:m.id, title:m.title}
            })
        },
        replaceShow(m){
            this.$router.replace({
                name:'xiangqing',
                params:{id:m.id, title:m.title}
            })
        }
    },
    computed:{
    },
    destroyed() {
        console.log("message 即将被销毁");
    }


}
</script>

<style>
</style>
